Fellow Travellers

SmartTable的简单使用

万峥嵘
字数统计: 1.7k阅读时长: 8 min
2018/11/16 Share

一.smartTable简介

1.简单介绍它的功能:

具体使用方法不再赘述,可以去 GitHub 去查看:https://github.com/huangyanbin/smartTable

  • 快速配置自动生成表格;
  • 自动计算表格宽高;
  • 表格列标题组合;
  • 表格固定左序列、顶部序列、第一行、列标题、统计行;
  • 自动统计,排序(自定义统计规则);
  • 表格图文、序列号、列标题格式化;
  • 表格各组成背景、文字、网格、padding等配置;
  • 表格批注;
  • 表格内容、列标题点击事件;
  • 缩放模式和滚动模式;
  • 注解模式;
  • 内容多行显示;
  • 分页模式;
  • 首尾动态添加数据;
  • 丰富的格式化;
  • 支持二维数组展示(用于类似日程表,电影选票等);
  • 导入excel(支持颜色,字体,背景,批注,对齐,图片等基本Excel属性);
  • 表格合并单元(支持注解合并,支持自动合并);
  • 支持其他刷新框架SmartRefreshLayout;
  • 可配置表格最小宽度(小于该宽度自动适配);
  • 支持直接List或数组字段转列;
  • 支持Json数据直接转换成表格;
  • 支持表格网格指定行列显示;
  • 支持自动生成表单。

    2.如何使用

  • 引用:添加 JitPack repository 到你的 build 文件

    1
    2
    3
    4
    5
    6
    allprojects {
    repositories {
    ...
    maven { url 'https://www.jitpack.io' }
    }
    }
  • 增加依赖

    1
    2
    3
    dependencies {
    compile 'com.github.huangyanbin:SmartTable:2.0'
    }

3.使用方式(两种)

  • 采用注解的形式
  • 基本模式,手动配置行与列

二.两种方式的使用

1.注解方式

  • 步骤一:在布局文件中使用 SmartTable

    1
    2
    3
    4
    <com.bin.david.form.core.SmartTable
    android:id="@+id/table"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  • 步骤二:定义表格(自定义bean对象)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    @SmartTable(name = "销售计划表")
    public class UserInfo {
    public UserInfo(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
    this.city = city;
    this.name = name;
    this.count = count;
    this.restaurant = restaurant;
    this.ka = ka;
    this.wholesale = wholesale;
    this.industry = industry;
    this.other = other;
    }

    // name:版块名称,count:目标值,restaurant:餐饮数量,ka:KA数量,wholesale:流通批发数量,industry:工业加工数量,other:其它数量
    @SmartColumn(id = 0, name = "部门/渠道", autoMerge = true)
    private String city;
    @SmartColumn(id = 1, name = "板块")
    private int name;
    @SmartColumn(id = 2, name = "目标值")
    private int count;
    @SmartColumn(id = 3, name = "餐饮")
    private int restaurant;
    @SmartColumn(id = 4, name = "KA")
    private int ka;
    @SmartColumn(id = 5, name = "流通批发")
    private int wholesale;
    @SmartColumn(id = 6, name = "工业加工")
    private int industry;
    @SmartColumn(id = 7, name = "其他")
    private int other;
    }
  • 步骤三:绑定数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    public class MainActivity extends AppCompatActivity {

    private SmartTable table;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    List<UserInfo> list = new ArrayList<>();
    table = findViewById(R.id.table);
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("乌鲁木齐",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("乌鲁木齐",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("乌鲁木齐",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("乌鲁木齐",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));
    list.add(new UserInfo("沈阳",100, 150, 50, 240, 1100, 450, 23458));

    table.setData(list);
    table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));
    }
    }
  • 实现效果
    注解方式效果图.png

2.基本方式,手动创建行与列

  • 步骤一:在布局文件中使用 SmartTable

    1
    2
    3
    4
    <com.bin.david.form.core.SmartTable
    android:id="@+id/table"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  • 步骤二:定义表格(自定义bean对象),与采用注解方式唯一的不同就是不在使用 @SmartTable与 @SmartColumn 进行标注

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    public class User {
    public User(String city, int name, int count, int restaurant, int ka, int wholesale, int industry, int other) {
    this.city = city;
    this.name = name;
    this.count = count;
    this.restaurant = restaurant;
    this.ka = ka;
    this.wholesale = wholesale;
    this.industry = industry;
    this.other = other;
    }

    // name:版块名称,count:目标值,restaurant:餐饮数量,ka:KA数量,wholesale:流通批发数量,industry:工业加工数量,other:其它数量
    private String city;
    private int name;
    private int count;
    private int restaurant;
    private int ka;
    private int wholesale;
    private int industry;
    private int other;
    }
  • 步骤三:手动创建列字段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //普通列
    Column<String> city = new Column<>("部门/渠道", "city");
    Column<Integer> name = new Column<>("板块", "name");
    Column<Integer> count = new Column<>("目标值", "count");
    Column<Integer> restaurant = new Column<>("餐饮", "restaurant");
    Column<Integer> ka = new Column<>("KA", "ka");
    Column<Integer> wholesale = new Column<>("流通批发", "wholesale");
    Column<Integer> industry = new Column<>("工业加工", "industry");
    Column<Integer> other = new Column<>("其他", "other");
    //设置该列当字段相同时自动合并
    city.setAutoMerge(true);
  • 步骤四:设置单元格内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //设置单元格内容
    List<User> list = new ArrayList<>();
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("乌鲁木齐", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("乌鲁木齐", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("乌鲁木齐", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("乌鲁木齐", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
    list.add(new User("沈阳", 100, 150, 50, 240, 1100, 450, 23458));
  • 步骤五:把数据绑定到 SmartTable 上

    1
    2
    3
    4
    5
    6
    7
    //表格数据 datas 是需要填充的数据
    TableData<User> tableData = new TableData<>("表格名", list, city, name, count, restaurant, ka, wholesale, industry, other);

    //设置数据
    table = findViewById(R.id.table);
    table.setTableData(tableData);
    table.getConfig().setContentStyle(new FontStyle(50, Color.BLUE));

3.两种方式的优势和不足

1.注解方式

  • 使用上简单,几行代码就可以创建一个表格
  • 不能实现列的动态创建
  • 不能实现列的排序

    2.基本方式

  • 使用上稍稍比注解方式麻烦一点
  • 可以实现列的动态创建(根据服务器返回的列的数量动态创建表格)
  • 可以实现点击列,对列进行升序以及倒序排列

三.smartTable的特性,效果(延用作者本人的文章作参考)

#谢谢!!!

CATALOG
  1. 1. 一.smartTable简介
    1. 1.1. 1.简单介绍它的功能:
    2. 1.2. 2.如何使用
    3. 1.3. 3.使用方式(两种)
  2. 2. 二.两种方式的使用
    1. 2.1. 1.注解方式
    2. 2.2. 2.基本方式,手动创建行与列
    3. 2.3. 3.两种方式的优势和不足
      1. 2.3.1. 1.注解方式
      2. 2.3.2. 2.基本方式
  3. 3. 三.smartTable的特性,效果(延用作者本人的文章作参考)